$success-color: #26a18f;
$error-color: #e74c3c;
$uploading-color: #236ef0;

@mixin item-color($color) {
  border-left: 4px solid $color;
  color: $color;
}

@keyframes loading-animation {
  0% {
    left: 0;
  }

  100% {
    left: calc(100% - 10px);
  }
}

@keyframes zoom-in {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

.upload-input {
  display: inline-block;
}

.upload-list {
  padding: 0;
  margin-top: 10px;
  list-style: none;

  .upload-list-item-success {
    padding: 10px 8px;
    max-width: 300px;
    transition: all .5s ease;
    cursor: default;
    animation: zoom-in .5s ease backwards .3s;
    @include item-color($success-color);



    .item-content {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .close-icon {
        display: none;
        color: $gray-500;
        font-size: 12px;
        transition: color .3s ease;

        &:hover {
          color: $gray-700;
          cursor: pointer;
        }
      }
    }

    &:hover {
      background-color: $gray-200;

      .close-icon {
        display: inline;
      }

      .status-icon {
        display: none;
      }
    }
  }

  .upload-list-item-error {
    @extend .upload-list-item-success;
    @include item-color($error-color)
  }

  .upload-list-item-uploading {
    @extend .upload-list-item-success;
    @include item-color($uploading-color)
  }

  .upload-list-item-ready {
    @extend .upload-list-item-success;
    @include item-color($uploading-color)
  }
}

.progress-bg {
  position: relative;
  width: 100%;
  background-color: #999;
  border-radius: 5px;
  overflow: hidden;

  .progress-bar {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    height: inherit;
    background-color: $uploading-color;
    color: white;
    transition: width .5s ease;
    border-radius: 5px;
    z-index: 2;
  }

  .progress-bar-animation {
    position: absolute;
    height: inherit;
    width: 10px;
    background-color: #ccc;
    animation: loading-animation 1s linear infinite;
  }
}

.dragger {
  @include flex-center(column);
  gap: 5px;
  width: 200px;
  height: 100px;
  border: 1px dashed $gray-500;
  border-radius: 5px;
  transition: border-color 0.2s ease, background-color 0.2s ease;

  &:hover {
    border-color: $uploading-color;
    cursor: pointer
  }
}

.is-dragover {
  border-color: $uploading-color;
  background-color: rgba($uploading-color, 0.3);
}